<template>
  <div class="common-upload">
    <div class="common-upload-list">
      <div v-for="(item, i) in fileList"
           :key="i"
           class="common-list-item"
           @mouseover="handleHover(true, i)"
           @mouseout="handleHover(false, i)">
        <img class="common-list-item-img"
             v-if="checkPic(item)"
             :src="item"
             alt="" />
        <div v-else
             class="word-wrap">{{item}}</div>
        <div v-show="!disabled && activeHover && i==activeIndex"
             class="active-hover">
          <i class="el-icon-zoom-in"
             @click="handlePictureCardPreview(item)"></i>
          <i class="el-icon-delete"
             v-if="isDelete"
             @click="handleRemove(item,i)"></i>
        </div>
      </div>
      <div v-if="!disabled"
           class="common-card">
        <input ref="fileUpload"
				     	 v-if="!isMultiple"
               type="file"
							 contenteditable="true"
               :accept="accept"
               class="common-input"
               @change="upload">
        <input  v-else
								ref="fileUpload"
								type="file"
               :accept="accept"
							 contenteditable="true"
               multiple
               class="common-input"
               @change="upload">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <el-dialog :modal="false"
               :visible.sync="dialogVisible">
      <img width="100%"
           :src="dialogImageUrl"
           alt="">
    </el-dialog>
  </div>
</template>
<script>
import Tools from '@/utils/Tools';
export default {
	props : {
		accept : { // 上传的类型默认是图片
			type : String,
			default : 'image/*'
		},
		isMultiple : { // 默认是单张
			type : Boolean,
			default : false
		},
		fileList : { // 上传的图片
			type : Array,
			default : function () {
				return [];
			}
		},
		isDelete : { // 默认不能删除
			type : Boolean,
			default : false
		},
		disabled : { // 是否禁用
			type : Boolean,
			default : false
		}
	},
	data () {
		return {
			activeHover : false,
			activeIndex : 0,
			dialogImageUrl : '',
			dialogVisible : false,
			list : this.fileList
		};
	},
	mounted (){
		const target = this.$refs.fileUpload;
		target.addEventListener('dragover', (e) => {
			e.preventDefault();
		});

		target.addEventListener('drop', (e) => {
			this.handleLocatImgPreview(e.dataTransfer.files);
			this.$emit('fileUpload', e.dataTransfer.files);
			e.preventDefault();
		});
	},
	methods : {
		extension : Tools.extension,
		upload (e) {
			let files = [];
			this.handleLocatImgPreview(e.target.files);
			Array.from(e.target.files).forEach((file) => {
				files.push(file);
			});
			this.$emit('fileUpload', files);
			document.querySelector('.common-input').value = '';
		},
		handlePictureCardPreview (file) {
			// 处理图片
			if (this.checkPic(file)) {
				this.dialogImageUrl = file;
				this.dialogVisible = true;
			} else {
				window.location.href = file;
			}
		},
		checkPic (file) {
			if (typeof file === 'string'){
				if (file.startsWith('data:image')){
					return true;
				}
				return ['png', 'jpg', 'gif', 'jpeg', 'webp'].includes(Tools.extension(file));
			}
			return false;
		},
		handleLocatImgPreview (files){
			Array.from(files).forEach((file) => {
				if (this.checkPic(file.name)){
					let reader = new FileReader();
					reader.onload =  (e)=>{
						this.fileList.push(e.target.result);
					};
					reader.readAsDataURL(file);
				} else {
					this.fileList.push(file.name);
				}


			});
		},
		handleRemove (item, index) {
			this.$confirm('确认删除此文件吗', {
				confirmButtonText : '确定',
				cancelButtonText : '取消',
				type : 'warning'
			}).then(() => {
				this.$emit('handleRemove', item, index);
			}).catch(() => {
				this.$message.info('已取消删除');
			});
		},
		handleHover (type, index) {
			this.activeHover = type;
			this.activeIndex = index;
		}
	}
};
</script>
<style lang="scss" scoped>
.common-upload-list {
  display: flex;
  flex-wrap: wrap;
}
.common-list-item {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 10px 10px 0;
  border-radius: 6px;
}
.active-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-icon-zoom-in,
.el-icon-delete {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.el-icon-delete {
  margin-left: 20px;
}
.common-list-item-img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.common-card {
  width: 148px;
  height: 148px;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  box-sizing: border-box;
  vertical-align: top;
  text-align: center;
}
.common-card:hover {
  border-color: #4091ff;
}
.common-input {
  position: relative;
  z-index: 1;
  width: 148px;
  height: 148px;
  outline: none;
  opacity: 0;
}
.el-icon-plus {
  position: absolute;
  font-size: 30px;
  font-weight: 400;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.word-wrap {
  word-wrap: break-word;
}
</style>
